﻿<html>
    <!--xmlns:v="urn:schemas-microsoft-com:vml"-->
<head>
    <title>第一个VML范例</title>
    <script>
        var browser = navigator.appName;
        var b_version = navigator.appVersion
        var version = b_version.split(";");
        var trim_Version = version[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer") {
            if (trim_Version == "MSIE6.0" || trim_Version == "MSIE7.0" || trim_Version == "MSIE8.0") {
                document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;");
                document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
            }
        }

        //var style = document.createElement("style");
        //style.innerHTML = ".vml{behavior:url(#default#VML);display:inline-block;}";
        //document.head.appendChild(style);
    </script>
</head>

<body>
    <v:polyline id="polyline1" class="vml" filled="false" points="0,0 0,100 20,150 200,100" style="position: absolute">
        <v:stroke class="vml" startarrow="Oval" endarrow="Classic" dashstyle="Dot" ></v:stroke>
    </v:polyline>

    <v:roundrect class='vml' style="position: absolute; width: 100px; height: 50px; left: 300px; top: 50px;">
        <v:shadow class="vml" on="F" type="single" color="#b3b3b3" offset="5px,5px"/>
        <v:TextBox class="vml" inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
    </v:roundrect>

    <v:oval class="vml" style="position: absolute; left: 550px; top: 50px; width: 100px; height: 100px" />

    <v:arc class="vml" filled="false" style="position: absolute; width: 100px; height: 100px; top: 300px; left: 300px" startangle="0" endangle="270" />

    <v:image id="img1" class="vml" src="../Images/timer.png" style="position: absolute; top: 300px; left: 450px; width: 48px; height: 48px" />

    <v:textbox id="textbox1" class="vml" style='font-size: 10.2pt; position: absolute; top: 300px; left: 700px;'>This is text!</v:textbox>

    <v:shapetype id="Diamond" class='vml' coordsize="21600,21600" o:spt="4" path="m10800,l,10800,10800,21600,21600,10800xe">
        <v:stroke class='vml' joinstyle="miter"/>
        <v:path class='vml' gradientshapeok="t" o:connecttype="rect" textboxrect="5400,5400,16200,16200"/>
    </v:shapetype>
    <v:shape id="shape1" type="#Diamond" class='vml' style='position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; z-index: 1' />
    <v:shape type="#Diamond" class='vml' style='position: absolute; left: 500px; top: 500px; width: 300px; height: 200px; z-index: 2' />

    <input type="button" onclick="change()" value="change" />
</body>
</html>
<script>
    function change() {
        //document.getElementById("shape1").style.width = "200px";
        //document.getElementById("shape1").style.height = "200px";
        document.getElementById("shape1").style.left = "200px";
        document.getElementById("shape1").style.top = "200px";

        document.getElementById("polyline1").points.value = "0,0 0,100 20,150 200,100 300,300";

        document.getElementById("textbox1").style.top = "350px";
        document.getElementById("textbox1").innerHTML = "this is the new one"

        var img = document.getElementById("img1");
        img.src = "../Images/log.png";
    }


    var v1 = document.createElement("v:shape");
    v1.id = "vvvv";
    v1.className = "vml";
    v1.setAttribute("type", "#Diamond");
    v1.style.position = "absolute";
    v1.style.left = "800px";
    v1.style.top = "300px";
    v1.style.width = "100px";
    v1.style.height = "100px";
    v1.style.zIndex = "3";

    document.body.appendChild(v1);

</script>
